<template>
    <div class="outer">
        <van-image
            height="400rpx"
            width="400rpx"
            class="qrcode"
            src="cloud://xinyuqian-5gvjlw4d0eabb09e.7869-xinyuqian-5gvjlw4d0eabb09e-1307420821/static/qrcode.svg"
        ></van-image>
        <van-button round type="info" @click.native="save"
            >保存二维码</van-button
        >
    </div>
</template>

<script>
import Notify from "@/wxcomponents/weapp/dist/notify/notify";
import vanImage from "@/wxcomponents/weapp/dist/image/index";
export default {
    components: { vanImage },
    data() {
        return { lock: false };
    },
    methods: {
        getImageUrl() {
            console.log(arguments);
        },

        getPower() {
            //获取相册授权
            return wx.getSetting().then((res) => {
                if (!res.authSetting["scope.writePhotosAlbum"]) {
                    Notify({
                        type: "success",
                        message: "请给予保存相册的权限",
                        selector: "#editor-notify",
                    });
                    return wx.authorize({
                        scope: "scope.writePhotosAlbum",
                    });
                }
                console.log("已有授权");
                return null;
            });
        },
        async save() {
            if (this.lock) return null;
            this.lock = true;
            Notify({
                type: "success",
                message: "保存中",
                selector: "#editor-notify",
            });
            try {
                await this.getPower();
            } catch (err) {
                Notify({
                    type: "warning",
                    duration: 5000,
                    message: "请在个人界面的小程序权限页面添加保存图片页面",
                    selector: "#editor-notify",
                });
                return null;
            }

            const res = await wx.cloud
                .downloadFile({
                    fileID: "cloud://xinyuqian-5gvjlw4d0eabb09e.7869-xinyuqian-5gvjlw4d0eabb09e-1307420821/static/qrcode.png",
                })
                .catch((err) => {
                    console.error(err);
                    Notify({
                        type: "danger",
                        message: "下载失败",
                        selector: "#editor-notify",
                    });
                });
            await wx
                .saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                })
                .then(() => {
                    Notify({
                        type: "success",
                        message: "保存图片成功",
                        selector: "#editor-notify",
                    });
                })
                .catch((err) => {
                    console.error(err);
                    Notify({
                        type: "danger",
                        message: "保存失败",
                        selector: "#editor-notify",
                    });
                });
            this.lock = false;
        },
    },
};
</script>

<style lang="less" scoped>
.outer {
    border-radius: 16rpx;
    height: 600rpx;
    width: 500rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    background-color: #fff;
    margin: auto auto;
}
</style>
